<template>
	<view style="height: 100%; width: 100%;">
		<view class="user-xinxi">
			<view class="user-img">
				<image v-if="userInfo.avatar!=''" class="touuxiang" :src="userInfo.avatar" mode="widthFix"></image>	
				<image v-else class="touuxiang" src="../../static/tx.png" mode="widthFix"></image>
			</view>
			<view class="user-information">
				<view class="user-image">
					<image class="img-xingming" src="../../static/xingming.png" mode="widthFix"></image>
					<image class="img-tingzhen" src="../../static/tingzhen.png" mode="widthFix"></image>
				</view>
				<view class="user-info">
					<text class="info-name">{{userInfo.userName}}</text>
					<text class="keshi-name" >科室: {{userInfo.deptName}}</text>
				</view>
			</view>
		<!-- 	<view class="user-information2">
				<view class="contont-top">
					<image class="top-xingming" src="../../static/xingming.png" mode="widthFix"></image>
					<view class="top-name">{{userInfo.userName}}</view>
				</view>
				<view class="contont-certent">
					<image class="certent-tingzhen" src="../../static/tingzhen.png" mode="widthFix"></image>
					<view class="certent-name">科室: </view>
				</view>
				<text class="contont-bottom">
					{{userInfo.deptName}}
				</text>
			</view> -->
		</view>
		<view class="xinxizhongxin">
			<button class="xinxi-btn" @tap="$emit('onInformation')">信息中心</button>
			<image class="img-new" src="../../static/images/xiaoxi/new.png" mode="widthFix"></image>
		</view>
		<view class="van-btn">
			<button class="xinxi-btn" @tap="$emit('onlogout')">退出</button>
		</view>
	</view>
</template>

<script> 
	export default {
		props: {
			userInfo: {
				type: Object,
				required: true
			}
		}
	}
</script>

<style scoped lang="less">
	.user-xinxi{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		border: 4rpx solid #61ADFF;
		width: 376rpx;
		height: 510rpx;
		border-radius: 32rpx;
		margin: 34rpx 0 170rpx 0;
		box-sizing: border-box;
		.user-img{
			display: flex;
			justify-content: center;
			.touuxiang{
				width: 240rpx;
				height: 240rpx;
				margin: 22rpx 0 48rpx 0;
			}
		}
		.user-information{
			display: flex;
			justify-content: center;
			align-items: center;
			.user-image{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 25rpx;
				.img-xingming{
					width: 62rpx;
					height: 46rpx;
					margin-bottom: 30rpx;
				}
				.img-tingzhen{
					width: 42rpx;
					height: 40rpx;
				}
			}
			.user-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				letter-spacing: 3rpx;
				.info-name{
					font-size: 40rpx;
					margin-bottom: 25rpx;
				}
				.keshi-name{
					font-size: 36rpx;
				}
			}
		}
		// .user-information2{
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
			
		// 	.contont-top{
		// 		display: flex;
		// 		align-items: center;
		// 		margin-bottom: 14rpx;
		// 		.top-xingming{
		// 			width: 62rpx;
		// 			height: 46rpx;
		// 			margin-right: 40rpx;
		// 		}
		// 		.top-name{
		// 			font-size: 40rpx;
		// 			letter-spacing: 3rpx;
		// 		}
		// 	}
		// 	.contont-certent{
		// 		display: flex;
		// 		align-items: center;
		// 		margin-bottom: 8rpx;
		// 		.certent-tingzhen{
		// 			width: 42rpx;
		// 			height: 40rpx;
		// 			margin-right: 24rpx;
		// 		}
		// 		.certent-name{
		// 			font-size: 36rpx;
		// 			letter-spacing: 3rpx;
		// 		}
		// 	}
		// 	.contont-bottom{
		// 		display: flex;
		// 		justify-content: center;
		// 		align-items: center;
		// 		font-size: 36rpx;
		// 		letter-spacing: 3rpx;
		// 	}
		// }
	}
	.xinxizhongxin{
		margin-bottom: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.xinxi-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 316rpx;
			height: 94rpx;
			color: #61ADFF;
			font-size: 42rpx;
			background: #FFFFFF;
			border: 4rpx solid #61ADFF;
			border-radius: 104rpx;
			font-weight: 400;
			box-sizing: border-box;
		}
		.img-new{
			position: absolute;
			top: -12rpx;
			right: 112rpx;
			width: 96rpx;
			height: 40rpx;
		}
	}
	.van-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		.xinxi-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 316rpx;
			height: 94rpx;
			color: #61ADFF;
			font-size: 42rpx;
			background: #FFFFFF;
			border: 4rpx solid #61ADFF;
			border-radius: 104rpx;
			font-weight: 400;
			box-sizing: border-box;
		}
	}
</style>
